<template>
  <div class="write-lincense-container">
	  <div class="write-lincense">
		<el-form ref="form" :model="writeForm" label-width="55px" label-position="left">
		  <el-form-item label="串 口">
			<el-col :span="7">
			<el-input v-model="writeForm.portName"/>
			</el-col>
			<el-button type="primary" class="change-btn" size="medium" @click="portSelect" :disabled="disabled">选择串口</el-button>
		  </el-form-item>
		<el-col :span="6">
		 <el-form-item label="波特率">
			<el-select v-model="writeForm.baudRate" size="medium" class="select" :disabled="disabled">
				 <el-option 
				  v-for="item in baudRateList"
				  :key="item.value"
				  :label="item.label"
				  :value="item.value">
				</el-option>
			</el-select>
		  </el-form-item>
		   </el-col>
		   <el-col :span="6">
		  <el-form-item label="校验位">
			<el-select v-model="writeForm.parity" size="medium" class="select" :disabled="disabled">
			 <el-option
			   v-for="item in parityList"
			   :key="item.value"
			   :label="item.label"
			   :value="item.value">
			 </el-option>
			</el-select>
		   </el-form-item>
		   </el-col>
		   <el-col :span="6">
		   <el-form-item label="停止位">
				<el-select v-model="writeForm.stopBits" size="medium" class="select" :disabled="disabled">
				  <el-option
				    v-for="item in stopBitsList"
				    :key="item.value"
				    :label="item.label"
				    :value="item.value">
				  </el-option>
				</el-select>
		    </el-form-item>
			</el-col>
			<el-col :span="6">
			<el-form-item label="数据位">
				<el-select v-model="writeForm.dataBits" size="medium" class="select" :disabled="disabled">
				  <el-option
				    v-for="item in dataBitsList"
				    :key="item.value"
				    :label="item.label"
				    :value="item.value">
				  </el-option>
				</el-select>
			 </el-form-item>
			</el-col>
			<el-button type="primary" :disabled="disabled" @click="serialOpen">打开串口</el-button>
			<el-button type="warning" :disabled="!disabled" @click="serialClose">关闭串口</el-button>
		  </el-form-item>
			<div class="box-wrapper">
				<div class="box">
					<h3>查询license</h3>
					<el-divider></el-divider>
					<div class="btn-wrapper">
						<!-- <el-button type="primary" size="medium" @click="getWriteNumber">告知后端</el-button> -->
						<el-button type="primary" size="medium" @click="handledData">手动查询</el-button>
						<el-button type="success" size="medium" @click="serialSend(0,0)">读取数据</el-button>
						<el-button  type="warning" size="medium" @click="addSn">加入SN清单</el-button>
					</div>
					<el-form-item label="SN:" label-width="80px">
						<el-input v-model="writeForm.sn" @input="changeInput"/>
					</el-form-item>
					<el-form-item label="License:" label-width="80px">
						<el-input v-model="writeForm.lincense" />
					</el-form-item>
				</div>
				<div class="box">
					<h3>写入license</h3>
					<el-divider></el-divider>
					<div class="btn-wrapper">
						<el-button type="success" size="medium" @click="serialSend(1,0)">获取数据</el-button>
						<el-button type="warning" size="medium" @click="serialSend(1,1)">写入设备</el-button>
					</div>
					<el-form-item label="数据库中的SN:" label-width="150px" >
						<el-input v-model="writeForm.snServer" disabled/>
					</el-form-item>
					<el-form-item label="数据库中的License:" label-width="150px">
						<el-input v-model="writeForm.lincenseServer" disabled/>
					</el-form-item>
					<!-- <div style="font-style: 10px !important;color: red;">{{writeForm.lincenseCode}}</div> -->
				</div>
			</div>
			<div class="export-data-wrapper">
				<div class="export-data">
					<h3>SN清单</h3>
					<el-divider></el-divider>
					<div class="btn-wrapper">
						<el-button type="primary" @click="getExportList">导出SN清单</el-button>
					</div>
					<el-table
					 :data="snList"
					 stripe
					 size="small"
					 max-height="300"
					 style="width: 100%">
					 <el-table-column
						label="序号"
						prop="snIndex"
						width="100">
					 </el-table-column>
					 <el-table-column
						prop="sn"
						label="SN"
						>
					 </el-table-column>
					 <el-table-column
					    fixed="right"
						align="center" 
					    label="操作"
					    width="120">
					    <template slot-scope="scope">
							<el-button
							   @click.native.prevent="deleteRow(scope.$index, snList)"
							   plain
							   icon="el-icon-delete"
							   circle
							   size="mini"
							   >
							</el-button>
					    </template>
					 </el-table-column>
					</el-table>
				</div>
				<!-- <div class="export-data">
					<h3>查询SN写入记录</h3>
					<el-divider></el-divider>
					<div class="from-wrapper">
						<el-form-item label="SN码:" label-width="60px">
							<div class="row-wrapper">
								<el-input v-model="writeForm.querySn" placeholder="请输入要查询的SN码"/>
								<el-button type="primary" @click.prevent="querySN" class="btn">查询</el-button>
							</div>
						</el-form-item>
					</div>
					<div class="table-wrapper">
						<div class="single-row">
							<div class="left">
								是否已写入
							</div>
							<div class="right">
								{{snUser.state === null?"":snUser.state === 0?"未使用":"已使用"}}
							</div>
						</div>
						<div class="single-row">
							<div class="left">
								写入者
							</div>
							<div class="right">
								{{snUser.user}}
							</div>
						</div>
						<div class="single-row">
							<div class="left">
								写入时间
							</div>
							<div class="right">
								{{snUser.writeTime}}
							</div>
						</div>
					</div>
				</div> -->
			</div>
			
		</el-form>
	</div>
  </div>
</template>

<script>
import { licenseRecordQuerySn, writeNumber, writeList} from "@/api/writeLincense";

String.prototype.padLeft = function (padChar, width) {
	var ret = this;
	while (ret.length < width) {
		if (ret.length + padChar.length < width) {
			ret = padChar + ret;
		}
		else {
			ret = padChar.substring(0, width - ret.length) + ret;
		}
	}
	return ret;
};
	
export default {
  data() {
    return {
		port: null,
		reader:null,
		keepReading: true,
		disabled:false,
		handleForm:0,//0为第一个表单按钮的读取数据，1为第二个表单按钮的获取数据
		handleBtnType:0,//当前操作的按钮：0为读取按钮，1为写入按钮
		writeForm: {
			portName: '',
			baudRate: '115200',//波特率
			parity:'none',//校验位
			stopBits: '1',//停止位
			dataBits: '8',//数据位
			sn:'',
			lincense:'',
			snServer:'',
			lincenseServer:'',
			lincenseCode:'',
			// querySn:''
		},
		//波特率下拉列表
		baudRateList:[{
			  value: '1200',
			  label: '1200'
			}, {
			  value: '2400',
			  label: '2400'
			}, {
			  value: '4800',
			  label: '4800'
			}, {
			  value: '9600',
			  label: '9600'
			}, {
			  value: '115200',
			  label: '115200'
		}],
		//校验位下拉列表
		parityList:[{
				value: 'none',
				label: 'none'
			}, {
				value: 'odd',
				label: 'odd'
			}, {
				value: 'even',
				label: 'even'
		}],
		//停止位下拉列表
		stopBitsList:[{
				value: '1',
				label: '1'
			}, {
				value: '2',
				label: '2'
		}],
		//数据位下拉列表
		dataBitsList:[{
				value: '8',
				label: '8'
			}, {
				value: '7',
				label: '7'
		}, {
				value: '6',
				label: '6'
		}, {
				value: '5',
				label: '5'
		}],
		
		snList: [],//sn清单
		/* snUser:{
			state: null,//0未使用 1使用
			user: '',
			writeTime: ''
		}, */
		writeReturnVal:'',//写入返回值
		snReturnVal:'',//读取串口完整返回值
		writeStep:0,//写入步骤：0完成第一步发送EFAA810000000081，1完成写入
		sn81Return:'',//发送EFAA810000000081返回的值
    }
  },
  created() {
  	// this.portChange()
	// this.strToReverseStr('10011F38AB0E2AC37263B31E05C575BFD891')
  },
  destroyed(){
	  //离开当前页面前先关闭串口，避免下次进入时串口被占用
	  this.serialClose()
  },
  methods: {
	//字符串转16进制
	strToHexCharCode(str) {
	　　if(str === "")
	　　　　return "";
	　　var hexCharCode = [];
		//hexCharCode.push("0x"); 
	　　for(var i = 0; i < str.length; i++) {
	　　　　hexCharCode.push((str.charCodeAt(i)).toString(16));
	　　}
		hexCharCode = hexCharCode.join(" ")
		// console.log(hexCharCode);
	　　return hexCharCode;
	},
	/* formatHex(s) {
	    if (s.indexOf(' ') < 0 && s.length % 2 == 1) {
	        s = '0' + s;
	    }
	    s = s.replace(/(\w{2})(?=[^ ])/gim, "$1 ")
	    s = s.replace(/^(\w) /gim, "0$1 ")
	    s = s.replace(/ (\w)$/gim, " 0$1")
	    s = s.replace(/ (\w) /gim, " 0$1 ")
	    s = s.replace(/ (\w) /gim, " 0$1 ")
	    return s;
	}, */
	//BBC格式
	createBBC(data) {
	    let sum = 0
	    let count = 0
		let ss = data.split(" ");
		for (let i = 0; i < ss.length; i++) {
			if (ss[i] == "") {
				continue;
			}
			sum = sum ^ parseInt(ss[i], 16);
			count++;
		}
		let dec = sum;
		let hex = dec.toString(16);
		hex = hex.toUpperCase();
		hex = hex.padLeft('0', 2);
		return hex	
	},
	//sn发生更改时清除license输入框内容
	changeInput(){
		this.writeForm.lincense = ""
	},
	// 数组类型转化为16进制字符串
	uint8Array(uint8Array) {
	    return Array.prototype.map
	  	.call(uint8Array, (x) => ('00' + x.toString(16)).slice(-2))
	  	.join('');
	},
	  // 16进制转uint8Array
	fromHexString(hexString){
	  	return new Uint8Array(hexString.match(/.{1,2}/g).map(byte => parseInt(byte, 16)));
	},
	//自动选择授权串口
	/* async portChange(){
		const ports = await navigator.serial.getPorts();
		this.port = ports[0];
		console.log(ports[0].getInfo());
		if (ports.length>0) {
			this.writeForm.portName = JSON.stringify(ports[0].getInfo())
		}
	}, */
	
	//选择串口
	async portSelect(){
		try{
			this.port = await navigator.serial.requestPort();
			this.writeForm.portName = JSON.stringify(this.port.getInfo())
			// this.serialOpen()
		}catch(e){
			//TODO handle the exception
			console.log(e);
			this.$message.info("未选择串口")
		}
	},
	//打开串口
	async serialOpen(){
		let that = this;
		that.keepReading = true;
		if (that.port == null) {
			// alert('打开串口出错');
			that.$message.error('打开串口出错，检查是否未选择串口！')
			return;
		}
		let opt = {
			baudRate: 115200,
			parity: 0,
			dataBits: 8,
			stopBits: 1
		};
		opt.baudRate = parseInt(that.writeForm.baudRate);
		opt.parity = that.writeForm.parity;
		opt.dataBits = parseInt(that.writeForm.dataBits);
		opt.stopBits = parseInt(that.writeForm.stopBits);
		
		//等待串口打开.
		try{
			await that.port.open(opt);
			that.$message.success('串口已打开!')
		} catch (error) {
			console.log(error);
			that.$message.error("串口已被占用")
			// that.serialClose();
			return;
		}
		
		that.disabled = true;
		while (that.port.readable && that.keepReading) {
			that.reader = that.port.readable.getReader();
		
			try {
				while (true) {
					const { value, done } = await that.reader.read();
					
					if (done) {
						// 允许稍后关闭串口.
						that.reader.releaseLock();
						break;
					}
					if (value) {
						//value is a Uint8Array.
						// console.log(value);
						let utf8decoder = new TextDecoder()
						let u8arr = new Uint8Array(value);
						//将Uint8Array字节组转成16进制字符串，并将字母转大写
						let strvalue = that.uint8Array(u8arr).toUpperCase()
						//如果是当前操作的是写入数据按钮
						if(that.handleBtnType === 1){
							// that.$message(strvalue)
							if (that.writeStep === 0) {
								that.sn81Return += strvalue
							} else{
								that.writeReturnVal += strvalue
							}
							
						}else{
							let snReturnVal = that.snReturnVal
							that.snReturnVal = snReturnVal + strvalue
							/* if (that.handleForm === 0) {
								// const temp1 = that.writeForm.sn;
								// that.writeForm.sn = temp1 + strvalue
								let snReturnVal = that.snReturnVal
								that.snReturnVal = snReturnVal + strvalue
								
							} else if(that.handleForm === 1){
								let snReturnVal = that.snReturnVal
								that.snReturnVal = snReturnVal + strvalue
							} */
						}
						
					}
				}
			} catch (error) {
				console.log(error);
				// TODO: Handle non-fatal read error.
			}finally {
			  // 允许稍后关闭串口。
			  that.reader.releaseLock();
			}
		}
	},
	//将字符串按每两位倒序返回字符串
	strToReverseStr(str){
		// console.log(str);
		var list=[];
		var ar2 = 0;
		for(let i = 0; i < str.length-1; i+=2){
		list.push((str.substring(i, i + 2)))
		}
		let newCode = list.reverse().join('').toLowerCase()
		// console.log(newCode)
		return newCode
	},
	
	//手动查询
	handledData(){
		let sn = this.writeForm.sn;
		if (sn.length < 1) {
			this.$message.error('请先填写SN码!');
		} else{
			licenseRecordQuerySn({sn}).then(response => {
				let lincense = response.data.uid;
				this.writeForm.lincense = lincense
			});
		}
	},
    //读写串口
	/* 
		 e: 表单索引
		 handleBtn：操作的按钮（0为读取，1为写入）
	*/
	async serialSend(e,handleBtn) {
		let that = this;
		this.handleBtnType = handleBtn;
		this.handleForm = e;
	  if(this.disabled === false){
		  this.$message.error('请先点击打开串口!');
		  return;
	  }
	  let data; 
	  if(handleBtn === 0){
		//读取
		data = "EFAA800000000080";//读取sn编码
		that.snReturnVal = '';
		if (e === 0) {
			//第一个表单
			this.writeForm.sn = ""
			//等待数据读取完毕
			setTimeout(function(){
				// console.log(that.snReturnVal);
				let code1 = that.snReturnVal.substring(18,26)
				code1 = that.strToReverseStr(code1)
				let code2 = that.snReturnVal.substring(26,35)
				code2 = that.strToReverseStr(code2)
				that.writeForm.sn = code1 + code2
			},100)
		}else if(e === 1){
			//第二个表单
			this.writeForm.snServer = "";
			//等待数据读取完毕
			setTimeout(function(){
				// console.log(that.snReturnVal);
				let code1 = that.snReturnVal.substring(18,26)
				code1 = that.strToReverseStr(code1).toLowerCase()
				let code2 = that.snReturnVal.substring(26,35)
				code2 = that.strToReverseStr(code2).toLowerCase()
				// alert(code)
				// console.log(code1);
				// console.log(code2);
				that.writeForm.snServer = code1 + code2
			},100)
		}
		//限时200毫秒等获取到串口完整的sn码，然后通过sn码到数据库获取对应的license码
		setTimeout(function(){
			let snName = ['sn', 'snServer'][e]
			that.handleLicense(snName,e)
		},200)
		
	  }else if(handleBtn === 1){
		  let snServer = that.writeForm.snServer;
		  let lincenseServer = that.writeForm.lincenseServer;
		  if (that.writeStep === 0) {
			that.sn81Return = ""
			if (!snServer.length) {
				//如果snSever为空
				that.$message.error('请先点击获取数据！')
				return
			}else if(!lincenseServer.length){
				//如果lincenseServer为空
				that.$message.error('未找到该设备对应licnese码，无法写入数据！')
				return
			}
		  	data = "EFAA810000000081";//读取license编码
			setTimeout(function() {
				if(that.sn81Return == "EFAA000028810024000000000000000000000000000000000000000000000000000000000000000000000000008D"){
				//license还未写入设备	
				that.writeStep = 1;		
				that.serialSend(1,1)	//调用写入数据方法
				}else{
					that.$message.error('设备已被写入过，请勿重复写入！')
					return
				}
			}, 200);
		  } else{
		  	//写入
		  	that.writeReturnVal = "";
		  	data = this.writeForm.lincenseCode;
		  	setTimeout(function(){
				that.writeStep = 0;
		  		console.log(that.writeReturnVal);
				that.$message.success('设备写入license成功！')
				that.getWriteNumber()
		  	},200)
		  }
	  }
	 
	  const writer = this.port.writable.getWriter();
	  let unitData = this.fromHexString(data)// 16进制转uint8Array
	  await writer.write(unitData);
	  writer.releaseLock();
    },
	//写入成功通知后端
	getWriteNumber(){
		let sn = this.writeForm.sn;
		// let sn = this.writeForm.snServer;
		let status = "1";
		writeNumber({sn, status}).then(response=>{
			console.log(response);
		})
	},
	
	//sn码获取license码
	/* 
	 snName: 操作表单对应的sn字段
	 e:操作的表单索引
	 */
	handleLicense(snName,e){
		let sn = this.writeForm[snName]
		licenseRecordQuerySn({sn}).then(response => {
			let {code, data} = response
			if (code == 200) {
				if (e == 0) {
					this.writeForm.lincense = data.uid;
				} else if(e == 1){
					this.writeForm.lincenseServer = data.uid;
					let uid =data.uid
					let headerCode = 'EFAA820020'
					let Code16 = this.strToHexCharCode(uid);
					let newCode16 = Code16.split(' ').join('');
					let xorCode = '82 00 20 ' + Code16;
					let xorCodeTranscoder = this.createBBC(xorCode)
					this.writeForm.lincenseCode = headerCode + newCode16 + xorCodeTranscoder
					console.log(this.writeForm.lincenseCode);
				}
			} else{
				console.log("获取license出错");
				this.$message.error('未找到该设备对应licnese码，请联系管理员！')
			}
		}).catch(err =>{
			console.log(err);
			if (e == 0) {
				this.writeForm.lincense = ''
			} else if(e == 1){
				this.writeForm.lincenseServer = ''
				this.writeForm.lincenseCode = ''
			}
		});
	},
	/* //写入串口数据
	async serialWrite() {
	  this.handleBtnType = 1;
	  if(this.writeForm.lincenseServer === ''){
		  this.$message('请先获取串口数据!');
		  return;
	  }
	  let data = this.writeForm.lincenseServer;
	  const writer = this.port.writable.getWriter();
	  let unitData = this.fromHexString(data)// 16进制转uint8Array
	  await writer.write(unitData);
	  writer.releaseLock();
	}, */
	//加入sn清单
    addSn() {
		let newSN = this.writeForm.sn
		if (!newSN.length) {
			this.$message.error("sn码为空，无法添加")
		} else{
			for(let i = 0; this.snList.length > i; i++){
				// if(this.snList[i].sn.indexOf(newSN)!== -1){
				if(this.snList[i].sn == newSN){
					this.$message.error("sn已存在，请勿重复添加！")
					return
				}
			}
			
			let snIndex = this.snList.length + 1
			this.snList.push({'snIndex':snIndex,'sn':newSN})
			this.$message.success('添加成功!')
		}
    },
	//删除sn
	deleteRow(index, rows) {
		rows.splice(index, 1);
	},
	
	//关闭串口
	async serialClose(){
		this.disabled = false
		let that = this;
		// 清除输入框数据
		this.writeForm.portName = "";
		this.writeForm.sn = "";
		this.writeForm.lincense = "";
		this.writeForm.snServer = "";
		this.writeForm.lincenseServer = "";
		this.writeForm.lincenseCode = "";
		try {
			that.keepReading = false
			await that.reader.cancel();
			await that.port.close();
		} catch (e) {
			console.log("报错："+ e);
			//TODO handle the exception
		}
	},
	//导出SN清单
	getExportList(){
		const that = this
		if (that.snList.length>0) {
			let jsonData = {
				trade:{
					tHeader: ["序号","SN"],
					filterVal: ["snIndex","sn"],
					list: that.snList
				}
			}    
			that.exportPathMethod(jsonData)// 调用exportPathMethod对数据进行处理导出
		} else{
			that.$message.info("列表为空，导出失败！")
		}
		
	},
	//导出SN函数方法
	exportPathMethod(data) {
		/*
		*注：csv文件：","逗号换列，\n换行，\t防止excel将长数字变科学计算法等样式
		*/
		//要导出的json数据
		let mainLists = data.trade   //主表
		let that = this
		//## 数据处理
		//一级表
		let mainTitle = mainLists.tHeader;//一级标题
		let mainTitleForKey = mainLists.filterVal;//一级过滤
		let mainList = mainLists.list;//一级数据
		let mainStr = [];
		mainStr.push(mainTitle.join("\t,")+"\n");   //标题添加上换列转成字符串并存进数组
		for(let i=0;i<mainList.length;i++){
			let temp = [];
			for(let j=0;j<mainTitleForKey.length;j++){
				temp.push(mainList[i][mainTitleForKey[j]]); //根据过滤器拿出对应的值
			}
			mainStr.push(temp.join("\t,")+"\n");    //取出来的值加上逗号换列转字符串存数组
		}
		// console.log(JSON.stringify(mainStr.join("")));//打印文本

		//两个表数组转成字符串合并
		let merged = mainStr.join("")
		//console.log(JSON.stringify(merged));//打印结果
		
		//## 导出操作
		// encodeURIComponent解决中文乱码
		const uri = 'data:text/csv;charset=gbk,\ufeff' + encodeURIComponent(merged)
		// const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(merged)
		// 通过创建a标签实现
		let link = document.createElement('a')
		link.href = uri
		// 对下载的文件命名
		// link.download = `用户信息${that.$moment(that.$moment().valueOf()).format('YYYYMMDD')}.csv`
		link.download = `sn清单.csv`
		document.body.appendChild(link)
		link.click()
	},
	//查询SN使用记录
	/* querySN(){
		let querySn = this.writeForm.querySn
		
		if (querySn.length < 1) {
			this.$message.error("请先输入要查询的SN码")
		} else{
			writeList({sn:querySn}).then(response => {
				let data;
				if (response.rows.length>0) {
					let {status, createTime, createUser} = response.rows[0]
					data = {
						state:status,//0未使用 1使用
						user:createUser,
						writeTime:createTime
					}
				} else{
					data = {
						state:0,//0未使用 1使用
						user:'— —',
						writeTime:'— —'
					}
				}
				this.snUser = data
				
				
			})
		}
		
	}, */
	
  }
}
</script>

<style lang="scss" scoped>
.write-lincense-container{
  background-color: #fff;
  border-radius: 8px;
  min-height: 500px;
  h3{
	  // border: 1px solid red;
	  color: #333;
	  margin: 8px 0 8px;
	  text-align: center;
	  &:before{
		  content: "";
		  width: 9px;
		  height: 9px;
		  border-radius: 50%;
		  display: inline-block;
		  background-color: #333;
		  margin-right: 10px;
		  position: relative;
		  top: -1px;
	  }
  }
  ::v-deep .el-divider--horizontal{
	  margin:15px 0 5px 0;
	  background-color: #f4f1f1;
  }
  .write-lincense{
	  padding: 30px 30px;
	  .change-btn{
		  margin-left: 10px;
	  }
	  .select{
		  width: 150px;
	  }
	  .box-wrapper{
		  display: flex;
		  justify-content: flex-start;
		  padding: 10px 0;
		  margin-top: 20px;
		  .box{
			  border: 1px dashed #ccc;
			  border-radius: 8px;
			  padding: 20px 30px;
			  width: 50%;
			  &:first-child{
				  margin-right: 30px;
			  }
			  .btn-wrapper{
				  padding: 20px 0;
				  text-align: right;
			  }
		  }
	  }
	  .export-data-wrapper{
		  display: flex;
		  justify-content: flex-start;
		  padding: 10px 0;
		  margin-top: 20px;
		  .export-data{
		  		width: calc(50% - 15px);
		  		// margin-top: 20px;
		  		border: 1px dashed #ccc;
		  		border-radius: 8px;
		  		padding: 20px 30px;
				&:first-child{
					margin-right: 30px;
				}
				.btn-wrapper{
					  padding: 20px 0;
					  text-align: right;
				}
		  }
		  .from-wrapper{
			  margin-top: 30px;
			.row-wrapper{
				display: flex;
				.btn{
					margin-left: 10px;
				}
			}
		  }
		  .table-wrapper{
			  border: 1px solid #ecedee;
			  .single-row{
				  display: flex;
				  border-bottom: 1px solid #ecedee;
				  line-height: 20px;
				  font-size: 12px;
				  &:last-child{
					  border-bottom: none;
				  }
				  .left{
					  width: 130px;
					  background-color: #fbfbfc;
					  color: #73777a;
					  padding: 14px 12px;
					  border-right: 1px solid #ecedee;
					  overflow: hidden;
				  }
				  .right{
					padding: 14px 12px;  
					overflow: hidden;
				  }
			  }
		  }
	  }
	 
  }
}
</style>

